<template>
	<view class="mainPage content" :style="{'padding-top': `${$store.state.safeArea.top || 0}px`, 'padding-bottom': `${$store.state.safeArea.bottom || 0}px`}">
		<public-head :title="title"></public-head>
		<view class="title">
			<textarea class="textarea" v-model.trim="textareaValue" maxlength="48" value="" placeholder="请输入您的自定义短语" placeholder-style="color:#aaa;font-size: 28rpx;width: 100vw" />
			<view class="num">
				<text>{{textareaValue.length}}</text>/48
			</view>
		</view>
		<!-- 按钮 begin -->
		<button class="button" v-if="!textareaValue" type="default" hover-class="none">保存</button>
		<button class="button active" v-else type="default" hover-class="none" @click="preservation">保存</button>
	</view>
</template>
<script>
var that
import publicHead from "@/components/publicHead/publicHead.vue"
export default {
	components: {
		publicHead
	},
	data() {
		return {
			title: "自定义常用语设置",
			textareaValue: '', //  输入的文本
		}
	},
	onLoad() {
		that = this
		//that.textareaValue=e.textareaValue
		//console.log('接收到的值',that.textareaValue)
	},
	methods: {
		preservation() {
			that.$postAjax1('Doctorsside_addscommon_words', {
				content: that.textareaValue
			}, function (data) {
				// uni.redirectTo({
				// 	url:'./common'
				// })
				uni.navigateBack()
				console.log(data)
			})
		}
	}
}
</script>
<style scoped lang="scss">
.content {
	width: 100vw;
	height: 100vh;
	background: #f6f6f6;
	.title {
		padding: 30rpx;
		background-color: #ffffff;
		.num {
			text-align: right;
			text {
				color: red;
			}
		}
		.textarea {
			height: 112px;
			font-size: 14px;
			width: 100%;
			color: #8a8a8a;
		}
	}
	.button {
		margin-top: 82rpx;
		width: 90%;
		height: 98rpx;
		line-height: 98rpx;
		background: rgba(0, 0, 0, 0.2);
		border-radius: 8rpx;
		border-style: none;
		border: none;
		color: #ffffff;
		&.active {
			background: linear-gradient(219deg, #ff9331 0%, #fe7600 100%);
		}
	}
}
</style>
